<template>
  <view class="bill">
    <view class="title">
      <image class="img" mode="scaleToFill" src="../../assets/images/sign/logo.png"></image>
      <view class="right">
        <image class="phone" mode="scaleToFill" src="../../assets/images/sign/phone.png"></image>
        <text class="text">客服热线：952999</text>
      </view>
    </view>
    <view class="bill_body">
      <view class="layers f1">
        <view class="barcode">
          <canvas canvas-id="bill-barcode" />
          <view class="bill_number">{{info.billNo}}</view>
        </view>
        <view class="address">
          <view>
            <view class="name">{{ info.toProvince }} {{ info.toFromCity }}</view>
            <view class="label">始发地</view>
          </view>
          <view>
            <view class="name">{{ info.fromProvince }} {{ info.fromCity }}</view>
            <view class="label">目的地</view>
          </view>
        </view>
      </view>
      <view class="layers f2">
        <view>
          <image class="img" mode="scaleToFill" src="../../assets/images/sign/fa.png"></image>
          <view class="address">
            <text class="name">{{ info.shipper }} {{ info.shipperMobile }}</text>
            <text class="addr">{{ info.toFromAdd }}</text>
          </view>
        </view>
        <view>
          <image class="img" mode="scaleToFill" src="../../assets/images/sign/shou.png"></image>
          <view class="address">
            <text class="name">{{ info.receiver }} {{ info.receiverMobile }}</text>
            <text class="addr">{{ info.fromAdd }}</text>
          </view>
        </view>
      </view>
      <view class="layers f3" v-for="(item,index) in order.orderList.goodsInfo">
        <view class="row">
          <view class="width_100">
            <text class="label">货物名称：</text>
            <text class="value">{{ item.goodsName }}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_100">
            <text class="label">规格：</text>
            <text class="value">{{ item.specifications }}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_50">
            <text class="label">件数：</text>
            <text class="value">{{ item.goodsNumber }}件</text>
          </view>
          <view class="width_50">
            <text class="label">包装：</text>
            <text class="value">{{ item.packing }}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_50">
            <text class="label">重量：</text>
            <text class="value">{{ item.weigh }}kg</text>
          </view>
          <view class="width_50">
            <text class="label">体积：</text>
            <text class="value">{{ item.goodsVolume }}m³</text>
          </view>
        </view>
      </view>
      <view class="layers f4">
        <view class="row">
          <view class="width_100">
            <text class="label">综合服务费：</text>
            <text class="value">¥{{ info.comprehensiveFee || 0 }}</text>
          </view>
        </view>
<!--        <view class="row">-->
<!--          <view class="sub_info">-->
<!--            <view>-->
<!--              <view class="width_50">-->
<!--                <text class="label">干线服务：</text>-->
<!--                <text class="value">¥{{ info.comprehensiveFee || 0 }}</text>-->
<!--              </view>-->
<!--              <view class="width_50">-->
<!--                <text class="label">仓储服务：</text>-->
<!--                <text class="value">¥{{ info.comprehensiveFee || 0 }}</text>-->
<!--              </view>-->
<!--            </view>-->
<!--            <view>-->
<!--              <view class="width_100">-->
<!--                <text class="label">场内装卸服务：</text>-->
<!--                <text class="value">¥{{ info.comprehensiveFee || 0 }}</text>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
        <view class="row">
          <view class="width_50">
            <text class="label">其它：</text>
            <text class="value">¥{{ info.otherFee || 0 }}</text>
          </view>
          <view class="width_50">
            <text class="label">费用合计：</text>
            <text class="value">¥{{ info.totalFee || 0 }}</text>
          </view>
        </view>
      </view>
      <view class="layers f5">
        <view class="row">
          <view class="width_50">
            <text class="label">保价声明价值：</text>
            <text class="value">¥{{ info.insuredMoney }}</text>
          </view>
          <view class="width_50">
            <text class="label">是否附带单据：</text>
<!--            <text class="value">{{ order.orderList.billServer && order.orderList.billServer.indexOf('1')!==-1 ? '是' : '否' }}</text>-->
            <text class="value">{{ info.isBill ? '是' : '否' }}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_50">
            <text class="label">代收贷款：</text>
            <text class="value">¥{{ info.collectionMoney }}</text>
          </view>
          <view class="width_50">
            <text class="label">收款人：</text>
            <text class="value">{{ info.returunAccountName }}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_100">
            <text class="label">返款类型：</text>
            <text class="value">{{ returnType() }}</text>
          </view>
        </view>
<!--        <view class="row" v-if="order.orderList.returnType">-->
<!--          <view class="width_100">-->
<!--            <text class="label">会员卡号：</text>-->
<!--            <text class="value">{{ order.orderList.returunAccount }}</text>-->
<!--          </view>-->
<!--        </view>-->
      </view>
      <view class="layers f6">
        <view class="row">
          <view class="width_50">
            <text class="label">运输类型：</text>
            <text class="value">{{ sendType() }}</text>
          </view>
          <view class="width_50">
            <text class="label">交货方式：</text>
<!--            <text class="value">{{ order.orderList.pickUpMode == '1'?'自提':(order.orderList.pickUpMode == '2'?'送货':'直送') }}</text>-->
            <text class="value">{{ info.pickUpMode }}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_50">
            <text class="label">付款方式：</text>
            <text class="value">{{ info.clearingForm == '1'?'现付':(info.clearingForm == '2'?'提付':'签单') }}</text>
          </view>
          <view class="width_50">
            <text class="label">结算地：</text>
            <text class="value">{{ info.clearAddName }}</text>
          </view>
        </view>
        <view class="row" v-if="info.clearingForm == '3'">
          <view class="width_100">
            <text class="label">签单单位：</text>
            <text class="value">{{ info.billCompany }}</text>
          </view>
        </view>
      </view>
      <view class="layers f7">
        <view class="row">
          <view class="width_50">
            <text class="label">制单员：</text>
<!--            <text class="value">{{ order.orderList.recorderName }}</text>-->
            <text class="value">{{ info.biller }}</text>
          </view>
          <view class="width_50">
            <text class="label">承运人：</text>
            <text class="value">{{ '承运人' }}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_50">
            <text class="label">托运人：</text>
            <text class="value">{{ info.shipper }}</text>
          </view>
          <view class="width_50">
            <text class="label">备注：</text>
            <text class="value">{{ info.remarks || '' }}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_100">
            <text class="label">日期时间：</text>
<!--            <text class="value">{{ dayjs(order.orderList.billingTime).format('YYYY-MM-DD') }}</text>-->
            <text class="value">{{ info.billingtimeYear }}年{{ info.billingTimeMonth }}月{{ info.billingTimeDay }}日</text>
          </view>
        </view>
      </view>
      <view class="layers final"  v-if="props.type=='2'">
        <view class="left">本人同意《承运单特别约定》</view>
        <image :src="'//'+info.signatureImage" mode="scaleToFill" class="right"></image>
      </view>
    </view>
    <!-- <button @click="makeCanvas">保存相册</button> -->
    <view style="position:fixed;left:0;top:99999999rpx">
      <canvas style="width: 351px;height: 1000px;" canvas-id="billCan"></canvas>
      </view>
   <!-- <image :src="imageUrl"></image> -->
  </view>
</template>

<script lang="ts" setup>
import Taro, {getCurrentInstance, useDidShow} from "@tarojs/taro"
import {ref, defineProps, withDefaults, reactive,defineExpose} from "vue"
import useMyOrderStore from "@/store/myOrder";
import { $post } from '@/@api'
import dayjs from 'dayjs'
import wxbarcode from 'wxbarcode'

const order = useMyOrderStore()
const info = ref<any>({})
const props = withDefaults(
    defineProps<{
      billData: any
      type: string
    }>(),
    {
      billData: {},
      type: '1'
    }
)

const returnType = ()=>{
  //return_cycle
  if (order.orderList.returnType == "1") {
    return "会员卡";
  } else if (order.orderList.returnType == "2") {
    return "银行卡";
  } else if (order.orderList.returnType == "3") {
    return "微信";
  } else if (order.orderList.returnType == "4") {
    return "现金";
  } else if (order.orderList.returnType == "5") {
    return "支付宝";
  }
  return ''
}

const sendType = ()=>{
  if (order.orderList.sendType == "1") {
    return "快件";
  } else if (order.orderList.sendType == "2") {
    return "普件";
  } else if (order.orderList.sendType == "3") {
    return "整车";
  } else if (order.orderList.sendType == "4") {
    return "560经济件";
  } else if (order.orderList.sendType == "5") {
    return "560商务件";
  } else if (order.orderList.sendType == "6") {
    return "次日达";
  } else {
    return "隔日达";
  }
}

const getInfo = async ()=>{
  const res = await $post('/selfmachine-system/order/electronicOrder',{billNo: '202000610'}) //order.orderList.billNo
  info.value = res.data.data[0]
  // wxbarcode.barcode('bill-barcode', order.orderList.billNo, 340, 120)
  wxbarcode.barcode('bill-barcode', 202000610, 340, 120)
}

getInfo()

const width = ref<number|string>(0)
const height = ref<number|string>(0)
const imgUrl = ref<string>('')
const drawImage1 = ref<any>()
const my_draw_canvas = ref(null)
const container = ref<any>()
const imageUrl = ref('')
const { page } = getCurrentInstance()
let widget:any

const ffff = ()=>{
  widget = page.selectComponent('.widget')
  console.log(widget,"测试");
  
  let wxml = `<view><view class="bill_body">

    <view class="layers f1">
        <view class="barcode">
          <canvas canvas-id="bill-barcode" />
          <view class="bill_number">${info.value.billNo}</view>
        </view>
        <view class="address">
          <view>
            <view class="name">${info.value.toProvince} ${info.value.toFromCity}</view>
            <view class="label">始发地</view>
          </view>
          <view>
            <view class="name">${info.value.fromProvince} ${info.value.fromCity}</view>
            <view class="label">目的地</view>
          </view>
        </view>
      </view>
      <view class="layers f2">
        <view>
<!--          <image class="img" mode="scaleToFill" src="../../assets/images/sign/fa.png"></image>-->
          <view class="address">
            <text class="name">${info.value.shipper} ${info.value.shipperMobile}</text>
            <text class="addr">${info.value.toFromAdd}</text>
          </view>
        </view>
        <view>
<!--          <image class="img" mode="scaleToFill" src="../../assets/images/sign/shou.png"></image>-->
          <view class="address">
            <text class="name">${info.value.receiver} ${info.value.receiverMobile}</text>
            <text class="addr">${info.value.fromAdd}</text>
          </view>
        </view>
      </view>
`
  order.orderList.goodsInfo.forEach(item=>{
    wxml += `
    <view class="layers f3">
        <view class="row">
          <view class="width_100">
            <text class="label">货物名称：</text>
            <text class="value_100">${item.goodsName}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_100">
            <text class="label">规格：</text>
            <text class="value_100">${item.specifications}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_50">
            <text class="label">件数：</text>
            <text class="value_50">${item.goodsNumber}</text>
          </view>
          <view class="width_50">
            <text class="label">包装：</text>
            <text class="value_50">${item.packing}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_50">
            <text class="label">重量：</text>
            <text class="value_50">${item.weigh}kg</text>
          </view>
          <view class="width_50">
            <text class="label">体积：</text>
            <text class="value_50">${item.goodsVolume}m³</text>
          </view>
        </view>
      </view>
    `
  })



  wxml += `
  <view class="layers f4">
        <view class="row">
          <view class="width_100">
            <text class="label">综合服务费：</text>
            <text class="value_100">¥${info.value.comprehensiveFee||0}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_50">
            <text class="label">其它：</text>
            <text class="value_50">¥${info.value.otherFee||0}</text>
          </view>
          <view class="width_50">
            <text class="label">费用合计：</text>
            <text class="value_50">¥${info.value.totalFee||0}</text>
          </view>
        </view>
      </view>
      <view class="layers f5">
        <view class="row">
          <view class="width_50">
            <text class="label">保价声明价值：</text>
            <text class="value_50">¥${info.value.insuredMoney}</text>
          </view>
          <view class="width_50">
            <text class="label">是否附带单据：</text>
            <text class="value_50">${info.value.isBill ? '是' : '否'}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_50">
            <text class="label">代收贷款：</text>
            <text class="value_50">${info.value.collectionMoney}</text>
          </view>
          <view class="width_50">
            <text class="label">收款人：</text>
            <text class="value_50">${info.value.returunAccountName}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_100">
            <text class="label">返款类型：</text>
            <text class="value_100">${returnType()}</text>
          </view>
        </view>
      </view>
      <view class="layers f6">
        <view class="row">
          <view class="width_50">
            <text class="label">运输类型：</text>
            <text class="value_50">${sendType()}</text>
          </view>
          <view class="width_50">
            <text class="label">交货方式：</text>
            <text class="value_50">${info.value.pickUpMode}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_50">
            <text class="label">付款方式：</text>
            <text class="value_50">${ info.value.clearingForm == '1'?'现付':(info.value.clearingForm == '2'?'提付':'签单') }</text>
          </view>
          <view class="width_50">
            <text class="label">结算地：</text>
            <text class="value_50">${info.value.clearAddName}</text>
          </view>
        </view>

  `
  if(info.value.clearingForm == '3'){
    wxml += `
    <view class="row">
      <view class="width_100">
        <text class="label">签单单位：</text>
        <text class="value_100">${info.value.billCompany}</text>
      </view>
    </view>
    `
  }
  wxml+=`
  </view>
      <view class="layers f7">
        <view class="row">
          <view class="width_50">
            <text class="label">制单员：</text>
            <text class="value_50">${info.value.biller}</text>
          </view>
          <view class="width_50">
            <text class="label">承运人：</text>
            <text class="value_50">-</text>
          </view>
        </view>
        <view class="row">
          <view class="width_50">
            <text class="label">托运人：</text>
            <text class="value_50">${info.value.shipper}</text>
          </view>
          <view class="width_50">
            <text class="label">备注：</text>
            <text class="value_50">${info.value.remarks}</text>
          </view>
        </view>
        <view class="row">
          <view class="width_100">
            <text class="label">日期时间：</text>
            <text class="value_100">${info.value.billingtimeYear}年${info.value.billingTimeMonth}月${info.value.billingTimeDay}日</text>
          </view>
        </view>
      </view>
      <view class="layers final">
        <view class="left">本人同意《承运单特别约定》</view>
      </view>
    </text>
</view></view>
  `


  const p1 = widget.renderToCanvas({
    wxml: wxml,
    style: {
      bill_body: {
        width: 326,
        height: 1000,
        border: '1px solid #e3e7ec',
        backgroundColor: '#fff',
        flexDirection: 'column',
      },
      layers: {
        width: 326,
        padding: 12,
        borderBottom: '1px solid #e3e7ec',
      },
      barcode: {
        height: 120,
        width: 185,
      },
      f1: {
        height: 120,
      },
      row: {
        width: 326,
        fontSize: 11,
      },
      width_100: {
        width: 326,
        flexDirection: 'row',
        alignItems: 'center',
      },
      width_50: {
        width: 163,
        flexDirection: 'row',
        alignItems: 'center',
      },
      label: {
        width: 76,
        color: '#999',
      },
      value_100: {
        color: '#252525',
        width: 250,
      },
      value_50: {
        color: '#252525',
        width: 87,
      },
    },
  })
  p1.then((res)=>{
    console.log(res,111)
    container.value = res
    ssss()
  }).catch((err)=>{
    console.log(err)
  })
}
const ssss = ()=>{
  const p2 = widget.canvasToTempFilePath()
  p2.then(res => {
    console.log(res.tempFilePath,132165)
    imageUrl.value = res.tempFilePath
  })
}

const makeCanvas=async (type :number)=>{
  console.log(info.value,"靠北啦");
 
  const ctx = Taro.createCanvasContext('billCan')
  ctx.fillStyle = '#fff'
  ctx.fillRect(0,0,351,2000)

  ctx.drawImage('../../assets/images/index/shareqr/qrhead.png', 0, 0, 351, 64)

  await Taro.canvasToTempFilePath({
    canvasId: 'bill-barcode',
    height:  120,
    success: (res)=>{
      console.log(res.tempFilePath)
      ctx.drawImage(res.tempFilePath, 20, 82, 170, 60)
    }})
  ctx.strokeStyle = '#e3e7ec'
  ctx.lineWidth = 1
  ctx.strokeRect(8, 72, 328, 120)
  ctx.strokeRect(208, 72, 130, 120)
  ctx.strokeRect(8, 192, 330, 113)
  ctx.strokeRect(8, 305, 330, 82)
  ctx.strokeRect(8, 387, 330, 94)
  ctx.strokeRect(8, 481, 330, 67)
  ctx.strokeRect(8, 548, 330, 108)
  ctx.fillStyle = '#999'
  ctx.font = "12px PingFang SC"
  ctx.fillText('始发地', 216, 120)
  ctx.fillText('目的地', 216, 182)

  ctx.fillStyle = '#252525'
  ctx.font = "bold 16px PingFang SC"
  
  
  ctx.fillText(`${info.value.toProvince?info.value.toProvince:''}`+info.value.toFromCity , 216, 96 )
  ctx.fillText(`${info.value.fromProvince?info.value.fromProvince:''}`+info.value.fromCity, 216, 158 )

  

  ctx.fillStyle = '#252525'
  ctx.font = "bold 13px PingFang SC"
  ctx.fillText(`202000601`, 70, 170)
  ctx.fillText(`${info.value.shipper}  ${info.value.shipperMobile}`, 48, 216)
  ctx.fillText(`${info.value.receiver}  ${info.value.receiverMobile}`, 48, 266 )

  const shortStr:Function=(str :string,num :number)=>{
    if(str?.length>num) return str.slice(0, num) + '...'
  else return str
  }

  ctx.fillStyle = '#999'
  ctx.font = "11px PingFang SC"
  ctx.fillText(shortStr(info.value.toFromAdd,24 )||"", 48, 240)
  ctx.fillText(shortStr(info.value.fromAdd,24 )||"", 48, 290)
  ctx.fillText("综合服务费:",20,335)
  ctx.fillText("费用合计:",170,335)
  ctx.fillText("其他:",20,365)
  ctx.fillText("保价声明价值:",20,414)
  ctx.fillText("是否附带单据:",170,414)
  ctx.fillText("代收货款:",20,444)
  ctx.fillText("收款人:",170,444)
  ctx.fillText("返款类型:",20,474)
  ctx.fillText("运输类型:",20,508)
  ctx.fillText("交货方式:",170,508)
  ctx.fillText("付款方式:",20,538)
  ctx.fillText("结算地:",170,538)
  ctx.fillText("制单员:",20,578)
  ctx.fillText("承运人:",170,578)
  ctx.fillText("托运人:",20,608)
  ctx.fillText("备注：",170,608)
  ctx.fillText("日期时间:",20,638)
  
  ctx.fillStyle = '#252525'
  ctx.font = "11px PingFang SC"
  ctx.fillText(`￥${info.value.comprehensiveFee || 0}`,85,335)
  ctx.fillText(`￥${info.value.totalFee || 0}`,220,335)
  ctx.fillText(`${info.value.otherFee || 0}`,55,365)
  ctx.fillText(`￥${info.value.insuredMoney || 0}`,95,414)
  ctx.fillText(`${info.value.isBill ? '是' : '否'}`,240,414)
  ctx.fillText(`￥${info.value.collectionMoney || 0}`,75,444)
  ctx.fillText(info.value.returunAccountName || "",210,444)
  ctx.fillText(returnType(),75,474)
  ctx.fillText(sendType(),75,508)
  ctx.fillText(info.value.pickUpMode|| "",220,508)
  ctx.fillText(`${info.value.clearingForm == '1'?'现付':(info.clearingForm == '2'?'提付':'签单')}`,75,538)
  ctx.fillText(info.value.clearAddName|| "",220,538)
  ctx.fillText(info.value.biller|| "",65,578)
  ctx.fillText("承运人",210,578)
  ctx.fillText(shortStr(info.value.shipper,8)|| "",65,608)
  ctx.fillText(shortStr(info.value.remarks,10)|| "",210,608)
  ctx.fillText(`${info.value.billingtimeYear}年${info.value.billingTimeMonth
  }月${info.value.billingTimeDay}日`,75,638)

  ctx.beginPath()
  ctx.arc(30,223,10,0, 2*Math.PI )
  ctx.fillStyle = '#0966ff'
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.arc(30,273,10,0, 2*Math.PI )
  ctx.fillStyle = '#0ec767'
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.fillStyle = '#fff'
  ctx.font = "12px PingFang SC"
  ctx.fillText('发', 24, 226 )
  ctx.fillText('收', 24 , 276 )
  ctx.closePath()

  
  ctx.draw()
  Taro.canvasToTempFilePath({
    canvasId: 'billCan',
    height:  648,
    success: (res)=>{
      console.log(res.tempFilePath)
      if(type==0){
        Taro.showShareImageMenu({
          path: res.tempFilePath
        })

      }else if(type==1){
        Taro.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: res => {
          Taro.showToast({
            title: '成功保存到相册',
            icon: 'success'
          })
        }
      })
      }
    }
  })
}
defineExpose({ makeCanvas })
</script>

<style lang="scss">
.bill {
  width: 100%;
  .title {
    width: 100%;
    height: 112rpx;
    background-color: #0966ff;
    box-sizing: border-box;
    padding: 0 40rpx 0 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .img {
      width: 208rpx;
      height: 68rpx;
    }
    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .phone {
        width: 32rpx;
        height: 32rpx;
      }
      .text {
        margin-left: 8rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: #fff;
      }
    }
  }

  .bill_body {
    width: calc(100% - 48rpx);
    box-sizing: border-box;
    border: 1px solid #e3e7ec;
    background-color: #fff;
    margin: 24rpx;
    > .layers {
      width: 100%;
      box-sizing: border-box;
      padding: 0 24rpx;
      border-bottom: 1px solid #e3e7ec;
      display: flex;
      overflow-x: hidden;
      &.f1 {
        height: 240rpx;
        .barcode {
          width: 370rpx;
          border-right: 1px solid #e3e7ec;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          box-sizing: border-box;
          padding-right: 24rpx;
          .bill_number {
            margin-top: 20rpx;
            font-size: 26rpx;
            line-height: 40rpx;
            font-weight: 500;
          }
          canvas {
            width: 340rpx;
            height: 120rpx;
          }
        }
        .address {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding: 0 24rpx;
          > view {
            display: flex;
            flex-direction: column;
            justify-content: center;
            .name {
              font-weight: bold;
              font-size: 32rpx;
              color: #252525;
              white-space: nowrap;
            }
            .label {
              font-size: 24rpx;
              color: #999;
              margin-top: 16rpx;
            }
          }
        }
      }
      &.f2 {
        flex-wrap: wrap;
        > view {
          width: 100%;
          height: 112rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .img {
            width: 40rpx;
            height: 40rpx;
          }
          .address {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: calc(100% - 56rpx);
            .name {
              font-weight: bold;
              font-size: 26rpx;
              color: #252525;
            }
            .addr {
              font-weight: 500;
              font-size: 22rpx;
              color: #999;
              margin-top: 18rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 100%
            }
          }
        }
      }
      &.f3, &.f4, &.f5, &.f6, &.f7, &.f8, &.f9 {
        &:last-child {
          border-bottom: none;
        }
        padding-bottom: 24rpx;
        flex-wrap: wrap;
        .row {
          width: 100%;
          margin-top: 24rpx;
          display: flex;
          font-size: 22rpx;
          font-weight: 500;
          .width_100 {
            width: 100%;
            .label {
              width: 152rpx;
              color: #999;
            }
            .value {
              width: calc(100% - 152rpx);
              color: #252525;
            }
          }
          .width_50 {
            width: 50%;
            .label {
              width: 152rpx;
              color: #999;
            }
            .value {
              width: calc(100% - 152rpx);
              color: #252525;
            }
          }
          .sub_info {
            width: 100%;
            border-radius: 8rpx;
            padding: 0 12rpx 12rpx;
            background-color: #f8f9fa;
            >view {
              width: 100%;
              margin-top: 12rpx;
              display: flex;
            }
          }
        }
      }
      &.final {
        border-bottom: none;
        height: 112rpx;
        display: flex;
        align-items: center;
        .left {
          color: #252525;
          font-size: 26rpx;
          font-weight: 500;
          width: 500rpx;
        }
        .right {
          width: 216rpx;
          height: 68rpx;
          box-sizing: border-box;
          border: 1rpx solid #c4c4c4;
          background-color: #f8f9fa;
        }
      }
    }
  }
}
</style>
